<template>
    <div class="hander" ref="hander">
        <div class="imgBox">
            <img class="image" :src="imageUrl" alt="">
        </div>
        <div class="tag" :class="isNeedFixed ? 'tagFixed' : 'tag'" :style="{ backgroundColor: navigationColor }">
            <div class="navigationList" id="navigationList">
                <div class="item" ref="nav_index" @mouseenter="changeColor(hoverColor, 'nav_index')"
                    @mouseleave="changeColor(navigationColor, 'nav_index')" :class="falg == 'index' ? 'active' : ''"
                    @click="jumpToPage('index')">首 页</div>
                <div class="item" :ref="`nav_${index}`" @mouseenter="changeColor(hoverColor, `nav_${index}`)"
                    @mouseleave="changeColor(navigationColor, `nav_${index}`)"
                    :class="falg == item.navigationId ? 'active' : ''" @click="jumpToPage(item)"
                    v-for="item, index in navigationList" :key="index">{{
                item.navigationName }}</div>
                <div class="item" ref="nav_login" @mouseenter="changeColor(hoverColor, 'nav_login')"
                    @mouseleave="changeColor(navigationColor, 'nav_login')" @click="jumpToPage('login')">登 录</div>
            </div>
        </div>
        <div class="search">
            <div class="time">{{ newTime }}</div>
            <div class="notice" v-show="noticeList">
                <span class="label">公告：</span>
                <div class="roll-box">
                    <div class="text">{{ noticeList }}</div>
                </div>
            </div>
            <div class="searchMine">
                <!-- <el-select class="select" v-model="searchData.option" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select> -->
                <!-- <div class="line"></div> -->
                <!-- <el-input class="input" v-model="searchData.keywords" placeholder="请输入搜索关键词"></el-input> -->

                <!-- <el-select class="input elSelect" v-model="articleId" filterable clearable placeholder="请输入搜索关键词并选择搜索项">
                    <el-option v-for="item, index in articleList" :key="index" :label="item.title"
                        :value="item.articleId">
                    </el-option>
                </el-select> -->
                <el-input class="input" v-model="searchStr" placeholder="请输入搜索关键词"></el-input>
                <div class="searchBtn" @click="searchInfo">
                    <i class="el-icon-search"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { formatTime } from '../utils/index'
import { getToken, setToken, removeToken } from '@/utils/auth'
import homepageApi from '@/api/homepage';
export default {
    name: 'App',
    components: {},
    props: {
        hoverColor: {
            type: String,
            default: () => {
                return ''
            }
        },
        navigationColor: {
            type: String,
            default: () => {
                return ''
            }
        },
        imageUrl: {
            type: String,
            default: () => {
                return ''
            }
        }
    },
    data() {
        return {
            currentColor: this.navigationColor,
            navigationList: [],
            falg: 'index',
            newTime: '',
            timer: null,
            isNeedFixed: false,
            searchData: {
                keywords: '',
                option: '本站'
            },
            options: [{
                value: '本站',
                label: '本站'
            }, {
                value: '全站',
                label: '全站'
            }],
            noticeList: [],
            articleList: [],
            articleId: '',
            searchStr: ''
        }
    },
    watch: {
        hoverColor: {
            handler(v) {
                this.initDomColor();
            }
        }
    },
    mounted() {
        // 添加事件监听器
        window.addEventListener('scroll', this.handleScroll);
        this.getNowTime();
        this.queryNotice();
        this.queryHomepageNavigation();
        this.queryNavigationList();
        this.initDomColor();
        // this.queryByNavigation();
    },
    beforeDestroy() {
        // 移除事件监听器
        window.removeEventListener('scroll', this.handleScroll);
        // 移除事件计时器
        clearInterval(this.timer)
    },
    methods: {
        changeColor(color, ref) {
            this.initDomColor();
            if (ref == 'nav_login' || ref == 'nav_index') {
                this.$refs[ref].style.backgroundColor = color
                if (this.$refs[ref].className.includes('active')) {
                    this.$refs[ref].style.backgroundColor = this.hoverColor
                }
            } else {
                this.$refs[ref][0].style.backgroundColor = color
                if (this.$refs[ref][0].className.includes('active')) {
                    this.$refs[ref][0].style.backgroundColor = this.hoverColor
                }
            }
        },
        initDomColor() {
            let domList = document.getElementById('navigationList').children
            console.log(domList, '---',)
            Array.from(domList).forEach(item => {
                item.style.backgroundColor = ''
                if (item.className.includes('active')) {
                    item.style.backgroundColor = this.hoverColor
                }
            })
        },
        searchInfo() {
            this.$router.push({
                path: '/navigationList', query: {
                    searchStr: this.searchStr,
                    isSearchFlag: true,
                    name: '文章搜索'
                }
            })
        },
        jumpPage(item) {
            if (item.jumpType == 'URL' && item.url) {
                window.open(item.url, '_blank');
            } else if (item.jumpType == 'ARTICLE' && item.articleId) {
                this.falg = item.articleId;
                this.articleId = ''
                this.jumpNavigation(item)
            }
        },
        jumpNavigation(item) {
            this.$router.push({
                path: '/navigation', query: {
                    articleId: item.articleId,
                    name: '文章'
                }
            })
        },
        async queryNavigationList() {
            let { data: list } = await homepageApi.queryNavigationList();
            this.articleList = list || [];
        },
        // queryByNavigation() {
        //     homepageApi.queryByNavigationIdAndSize(10000).then(res => {
        //         if (res.data) {
        //             this.articleList = res.data || []
        //         } else {
        //             this.articleList = []
        //         }
        //     }).catch(err => {
        //             this.articleList = []
        //     });
        // },
        async queryHomepageNavigation() {
            let { data } = await homepageApi.queryHomepageNavigation();
            this.navigationList = data || [];
            this.navigationList = this.navigationList.filter(item => {
                return item.functionTypeStr
            })
            console.log(this.navigationList)
        },
        async queryNotice() {
            this.noticeList = ''
            let { data } = await homepageApi.queryNotice();
            let list = data || [];
            list.forEach(element => {
                this.noticeList += element.content
            });
        },
        jumpToPage(item) {
            console.log(item)
            if (item == 'index') {
                this.falg = 'index'
                this.$router.push({ path: '/index' })
            } else if (item == 'login') {
                removeToken();
                const routeData = this.$router.resolve({ path: '/login' })
                window.open(routeData.href, '_blank');
            } else if (item.functionType == 'URL' && item.url) {
                window.open(item.url, '_blank');
            } else if (item.functionType == 'SUBCOLUMNS' && item.navigationId) {
                this.falg = item.navigationId
                this.$router.push({
                    path: '/navigationList', query: {
                        name: item.navigationName,
                        navigationId: item.navigationId
                    }
                })
            }
        },
        handleScroll() {
            const hander = this.$refs.hander;
            // 获取元素高度 要想实现tag滚动到顶部后固定，可以通过滚动条的高度和tag的高度来实现
            //当滚动条的高度大于等于tag高度时说明已经滚动到或者超出tag的位置
            //此时就可以判断是否需要fixed定位
            const height = hander.offsetHeight - 110;
            // 处理滚动事件
            // console.log(window.scrollY, height); // 输出当前滚动位置
            this.isNeedFixed = window.scrollY >= height
        },
        getNowTime() {
            this.timer = setInterval(() => {
                this.newTime = formatTime()
            }, 999);
        },
    }
}
</script>

<style lang="scss" scoped>
.hander {
    width: 100%;
    overflow: visible;

    .imgBox {
        width: 1200px;
        height: 210px;
        margin: 0 auto;
        position: relative;

        .image {
            position: absolute;
            left: 0;
            top: 50%;
            width: 900px;
            height: 107px;
            transform: translateY(-50%);
        }
    }

    .search {
        width: 1200px;
        height: 40px;
        margin: 0 auto;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .notice {
            width: 500px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 30px;
            font-size: 14px;
            color: #f28006;
            padding: 0 15px;

            .label {
                width: 50px;
            }
        }

        .searchMine {
            width: 410px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            background-color: #ffffff;
            border: 1px solid #cbcbcb;
            border-radius: 4px;
            overflow: hidden;

            .line {
                height: 10px;
                width: 1px;
                background: #cecece;
            }
        }

        .time {
            width: 180px;
            font-size: 14px;
        }

        .select {
            width: 110px;
        }

        .elSelect {
            width: 360px;
        }

        .searchBtn {
            width: 40px;
            background-color: #164fa6;
            line-height: 32px;
            font-size: 20px;
            text-align: center;
            color: #ffffff;
            cursor: pointer;
        }

        ::v-deep .el-input__inner {
            border: none !important;
        }
    }

    .tag {
        width: 100%;
        height: 60px;
        margin: 0 auto;
        background: #164fa6;
        line-height: 60px;
        transition: all 0.5s;

        .navigationList {
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

            .item {
                padding: 0 20px;
                color: #ffffff;
                cursor: pointer;

                &:hover {
                    background-color: #137bff;
                }
            }

            .active {
                background-color: #137bff;
            }
        }
    }

    .tagFixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        box-shadow: 1px 1px 10px #00000053;
    }
}

.roll-box {
    height: 40px;
    border-radius: 6px;
    width: 450px;
    position: relative;
    line-height: 40px;
    overflow: hidden;
}

.roll-box .text {
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
    animation-name: roll;
    animation-duration: 20s;
    animation-timing-function: linear;
    padding-right: 20px;
    animation-iteration-count: infinite;
}

.roll-box .text:before {
    content: '';
    display: inline-block;
    width: 200px;
    height: 100%;
}

@keyframes roll {
    from {
        transform: translate(0%, 0);
    }

    to {
        transform: translate(-100%, 0);
    }
}
</style>